<template>
    <div>
        <VHeader title='志愿服务活动'>志愿服务活动</VHeader>  
        <div class="wrap">
            <h3 class="title">{{info.title}}</h3>
            <div class="content">
                {{info.description}}
            </div>
            <ul class="list">
                <li>
                    <span class="grey">
                        服务团体：
                    </span>
                    {{info.teamName}}
                </li>
                <li class='flex'>
                    <div class="w80">
                        <span class="grey">
                            服务时间：
                        </span>
                        {{info.activityTime && info.activityTime.split(' ')[0]}} <span class="text-muted">{{info.week}}</span>
                    </div>
                     <div>
                        <span class="grey">
                            招募人数：
                        </span>
                        {{info.recruitNum}}
                    </div>
                </li>
                <li>
                    <span class="grey">
                        服务地点：
                    </span>
                    {{info.activityPlace}}
                </li>
                <li class="flex">
                    <div class="w80">
                        <span class="grey">
                        报名截止：
                        </span>
                        {{info.endingTime}}
                    </div>
                    <div>
                        <span class="grey">
                        状　　态：
                        </span>
                        <span class="activity-status" :class="'status-'+info.status">
                            {{info.status|activityStatus}}
                        </span>
                    </div>
                </li>
                <li class="flex">
                    <div class="w80">
                        <span class="grey">
                        招募人数：
                        </span>
                        {{info.recruitNum}}人
                    </div>
                    <div>
                        <span class="grey">
                        报名人数：
                        </span>
                        <span class="borderd">
                            还差{{info.recruitNum - info.applyNum}}人
                        </span>
                    </div>
                </li>
                <li>
                    <span class="grey">
                        联系人：
                    </span>
                    <span>
                        &nbsp;&nbsp;&nbsp;{{info.contactName}}(
                        <a :href="'tel:'+info.contactMobile" class="themeColor">{{info.contactMobile}}</a>)
                    </span>
                </li>
            </ul>
            <div class="btns">
            <van-button color="#F65D5D"
                        v-if="info.status === 1"
                block loading-text='提交中' :loading='loading' @click="loginAction">我要报名参加</van-button>

            </div>
        </div> 
    </div>
</template>

<script>
    
    import {Dialog} from 'vant';
export default {
    data() {
        return {
           info:{},
           loading:false 
        }
    },
    methods: {
        loginAction(){
            Dialog.confirm({
                title: '确认',
                message: '确定要报名参加？'
            }).then(async () => {
                await this.$http({
                    method:'api.activity.join',
                    id:this.$route.params.id
                })
                Dialog.alert({
                    title: '成功',
                    message: '参与活动成功，感谢您的参与！'
                }).then(() => {
                    this.$router.push('/myJoinActivity');
                });
            }).catch(()=>{})
        }
    },
    async created() {
        let res = await this.$http({
            method:'api.Activity.getDetail',
            id:this.$route.params.id
        })
        this.info=res.data.info
    },
}
</script>

<style lang='scss' scoped>
.wrap{
    padding: .55rem .4rem 0;
}
h3.title{font-weight: bold;font-size: .34rem;text-align: center;padding-bottom: .34rem;
border-bottom: solid 1px #378EEF;
}
.content{padding: .4rem 0;border-bottom: 1px solid #CBCACA;line-height: 1.5;font-size: 14px;}
.list>li{
    font-size: 14px;padding:.3rem 0;border-bottom: solid 1px #CBCACA;
}
.grey{color: #888888;}
.borderd{
    border: solid 1px #F65D5D;
    color: #F65D5D;
    border-radius: 4px;
    padding: 2px;
}
.text-muted {
    color:#888888;
}
.activity-status{
    border-radius: .16rem;
    color: #fff;
    font-weight: bold;
    line-height: .32rem;
    padding: 0 .2rem;
}
.status-1{
    background: #FFA518;
}
.status-2{
    background: #378EEF;
}
.status-3{
    background: #0A930A;
}
.status-4{
    background: #F65D5D;
}
.w80{width: 60%}
.btns{margin-top: 1.6rem;;}
</style>
